<template>
	<transition name="router-fade">
		<div class="modal-sheet" v-show="show">
			<div class="sheet-body" style="height: 250px;">
				<div class="title bottom-border">
					<span class="cancel" @click="toggleModal()">{{cancelText}}</span>
					<p class="text">请选择您的生日</p>
					<span class="main-color" @click="confrim()">{{confirmText}}</span>
				</div>

				<div class="cont">
					<mt-datetime-picker
						:visibleItemCount=5
					    ref="picker"
					    type="date"
					    v-model="birthDay">
					 </mt-datetime-picker>
				</div>
			</div>
		</div>
	</transition>
</template>

<script type="text/javascript">
	import { DatetimePicker } from 'mint-ui'; 

	export default {
		props: {
			title: {
				type: String,
				default: ''
			},

			show: {
				type: Boolean,
				default: false
			},

			cancelText: {
				type: String,
				default: '取消'
			},

			confirmText: {
				type: String,
				default: '确定'
			}
		},

		components: {
			'mt-datetime-picker': DatetimePicker
		},

		data() {
			return { 
				birthDay: ''
			}
		},

		methods: {
			onValuesChange(picker) {
				this.selectData = picker.getValues();
			},

			confrim() {
				this.$emit('select-birth', this.birthDay);
				this.toggleModal(false);
			},

			toggleModal(status = false) {
				this.$emit('toggle-modal', status);
			}
		},

		mounted() {
			this.$refs.picker.open();
		}
	}
</script>

<style type="text/css" lang="scss">
	.modal-sheet {
		position: fixed;
		z-index: 102;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.45);

		.sheet-body {
			position: absolute;
			width: 100%;
			/*height: 250px;*/
			bottom: 0;
			background: #fff;

			.title {
				display: flex;
				height: 44px;
				padding: 0 16px;
				justify-content: space-between;
				align-items: center;
				font-size: 15px;

				.text {
					font-size: 17px;
				}
			}

			.cont {
				padding: 0 37px;
			}
		}
	}
</style>